<template>
	<view>
		<view class="box">
			<!-- <view class="top">
				<!-- 增加课程点击事件 -->
				<!-- <block v-for="(item, index) in nav" :key="index">
					<view class="subject" @tap="subjectChange(index)" :class="index == navIndex ? 'active' : ''">{{ item.name }}</view>
				</block>
			</view> --> 
			<block v-if="examList.length > 0">
				<block v-for="(item, index) in examList" :key="index">
					<navigator class="middle" :url="`./score_info?exam_score_id=${item.exam_score_id}`">
						<image src="../../static/subject.jpg" style="width: 88rpx; height: 88rpx;" class="subject_picture"></image>
						<view class="info">
							<view class="subject_lst">{{ item.exam.title }}</view>
							<view class="time">{{ item.exam.exam_time }}</view>
						</view>

						<view class="info_right"><view class="inf_right">></view></view>
					</navigator>
				</block>
			</block>

			<view class="line"></view>

			<!-- <view class="bottom"><view class="bottom_content" @tap="toggleModal">创建考试</view></view> -->
		</view>
		<!-- 弹出的模态框 -->

		<view class="exam-model" v-show="showModal">
			<view class="openexam">
				<view class="examtile">
					<text class="textone">-</text>
					<text class="texttwo">创建考试</text>
					<text class="textone">-</text>
					<text class="close" @tap="toggleModal">关闭</text>
				</view>
				<input type="text" placeholder="请输入考试标题" v-model="title" class="inputtext" />
				<view class="datepick">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view>{{ date }}</view>
					</picker>
				</view>

				<view class="timepick">
					 <picker mode="time" :value="time" start="09:00" end="21:00" @change="bindTimeChange">
							<view >{{time}}</view>
						</picker>
				</view>
				<view @tap="createExam" class="lastbutton">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			// 用于记录选中的科目
			navIndex: 0,
			nav: [
				{
					name: '语文'
				},
				{
					name: '数学'
				},
				{
					name: '英语'
				},
				{
					name: '物理'
				},
				{
					name: '化学'
				},
				{
					name: '历史'
				}
			],
			title: '',
			date: currentDate,
			 time: '9:00',
			showModal: false,
			examList: []
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onLoad() {
		console.log(this.$u);
		this.$u.appLogin(() => {
			this.getExamList();
		});
	},
	methods: {
		// 切换显示模态框
		toggleModal() {
			this.showModal = !this.showModal;
		},

		// 用户点击事件设置navIndex达到切效果
		subjectChange(index) {
			this.navIndex = index;
		},

		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},

		bindDateChange: function(e) {
			this.date = e.target.value;
		},

		bindTimeChange: function(e) {
			this.time = e.target.value;
		},

		// 获取考试列表
		getExamList() {
			this.$u
				.httpGet({
					url: 'users/exam/student_list'
				})
				.then(res => {
					this.examList = res.result.list;
				});
		},

		createExam() {
			if(!this.title){
				uni.showToast({
					icon:"none",
					title:'请输入考试标题'
				})
				return;
			}
			this.$u
				.httpPost({
					url: 'users/exam/create',
					data: {
						title: this.title,
						exam_time: this.date + '' + this.time
					}
				})
				.then(res => {
					console.log(res);
					this.examList = res.result.list;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.top {
	display: flex;
	flex-wrap: wrap;
	margin-top: 34rpx;
	margin-bottom: 7rpx;
	/* border: #0000FF solid 1rpx; */
	border-bottom: #f6f6f6 solid 20rpx;
}
.subject_click {
	margin-right: 15rpx;
	margin-left: 30rpx;
	width: 190rpx;
	height: 60rpx;
	background-color: #4791fe;
	border-radius: 50rpx;
	color: #ddfdff;
	font-size: 27rpx;
	text-align: center;
	line-height: 60rpx;
	margin-bottom: 24rpx;
}
.subject {
	margin-right: 15rpx;
	margin-left: 30rpx;
	width: 200rpx;
	height: 60rpx;
	background-color: #f6f6f6;
	border-radius: 50rpx;
	color: #989898;
	font-size: 27rpx;
	text-align: center;
	line-height: 60rpx;
	margin-bottom: 24rpx;
}
/* 用于区别选中科目样式 */
.subject.active {
	background-color: #4791fe;
	color: #fff;
}
.middle {
	display: flex;
	flex-direction: row;
	margin-left: 32rpx;
	margin-right: 30rpx;
	margin-bottom: 30rpx;
	margin-top: #f6f6f6 solid 5rpx;
}

.info {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.info_right {
	text-align: center;
	line-height: 130rpx;
	/* border: #0000FF solid 1rpx; */
}
.subject_picture {
	margin-top: 33rpx;
}
.subject_lst {
	margin-top: 40rpx;
	margin-left: 33rpx;
	font-size: 30rpx;
	margin-bottom: 10rpx;
}
.time {
	margin-left: 33rpx;
	font-size: 20rpx;
	color: #a3a3a3;
}
.inf_right {
	width: 16rpx;
	height: 18rpx;
	display: flex;
	float: right;
	color: #b2b2b2;
}
.bottom {
	height: 230rpx;
	width: 750rpx;
	background-color: #f6f6f6;
	border: #f6f6f6 solid 1rpx;
}
.bottom_content {
	margin-left: 75rpx;
	margin-top: 65rpx;
	width: 605rpx;
	height: 80rpx;
	background-color: #2e84ff;
	color: #f4fffc;
	border-radius: 50rpx;
	text-align: center;
	line-height: 80rpx;
}
.pop-examname {
	margin-top: 130rpx;
	font-size: 34rpx;
	height: 75rpx;
	color: #bdbdbd;
	border: 1rpx solid #bdbdbd;
	border-radius: 10rpx;
	letter-spacing: 5rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pop-creat {
	width: 200rpx;
	height: 70rpx;
	font-size: 30rpx;
	background-color: #007aff;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40rpx;
	margin-bottom: 120rpx;
	color: white;
}

.exam-model {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
}
.openexam {
	
	position: absolute;
	width: 100vw;
	bottom: 0;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	padding-bottom: 30rpx;
}

.examtile {
	margin-top: 40rpx;
	position: relative;
	width: 100vw;
	display: flex;
	justify-content: center;
	.close {
		position: absolute;
		right: 20rpx;
		color: red;
	}
}

.textone {
	color: #398aff;
	font-size: 30rpx;
}

.texttwo {
	font-size: 30rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
}
.datepick,.timepick {
	margin-left: 100rpx;
	margin-right: 100rpx;
	margin-top: 20rpx;
	border-radius: 15rpx;
	border-style: solid;
	border-color: #e5e5e5;
	border-width: 1px;
	height: 75rpx;
	text-align: center;
	line-height: 75rpx;
}



.lastbutton {
	margin-left: 270rpx;
	margin-right: 270rpx;
	margin-top: 35rpx;
	background-color: #4892ff;
	height: 70rpx;
	border-radius: 90rpx;
	color: #ffffff;
	font-size: 30rpx;
	text-align: center;
	line-height: 70rpx;
}
.inputtext {
	margin-left: 100rpx;
	margin-right: 100rpx;
	margin-top: 75rpx;
	border-style: solid;
	border-width: 1px;
	height: 75rpx;
	border-radius: 15rpx;
	border-color: #e5e5e5;
	text-align: center;
}
</style>
